﻿@inject IStringLocalizer<DropdownWidgetNormal> Localizer

<div class="widget-demo">
    <DropdownWidget>
        <DropdownWidgetItem Icon="fa-regular fa-envelope" BadgeNumber="4">
            <HeaderTemplate>
                <span>@Localizer["BasicUsageMessage"]</span>
            </HeaderTemplate>
            <BodyTemplate>
                @for (var index = 0; index < 4; index++)
                {
                    <div class="dropdown-item dropdown-item-center">
                        <Avatar IsCircle="true" IsIcon="true" Size="Size.Small" />
                        <div class="ms-2">
                            <div class="d-flex position-relative">
                                <b>Argo Zhang</b>
                                <small><i class="fa-regular fa-clock"></i> @(4 + index) mins</small>
                            </div>
                            <div class="text-truncate">Why not buy a new awesome theme?</div>
                        </div>
                    </div>
                }
            </BodyTemplate>
            <FooterTemplate>
                <div>@Localizer["BasicUsageViewMessage"]</div>
            </FooterTemplate>
        </DropdownWidgetItem>
        <DropdownWidgetItem Icon="fa-regular fa-bell" BadgeNumber="10" HeaderColor="Color.Success" BadgeColor="Color.Warning">
            <HeaderTemplate>
                <span>@Localizer["BasicUsageNotify"]</span>
            </HeaderTemplate>
            <BodyTemplate>
                @for (var index = 0; index < 10; index++)
                {
                    <div class="dropdown-item dropdown-item-center">
                        <i class="fa-solid fa-users text-primary"></i>
                        <div class="ms-2">5 new members joined</div>
                    </div>
                }
            </BodyTemplate>
            <FooterTemplate>
                <div>@Localizer["BasicUsageViewNotify"]</div>
            </FooterTemplate>
        </DropdownWidgetItem>
        <DropdownWidgetItem Icon="fa-solid fa-flag" BadgeNumber="9" HeaderColor="Color.Danger" BadgeColor="Color.Danger">
            <HeaderTemplate>
                <span>@Localizer["BasicUsageTasks"]</span>
            </HeaderTemplate>
            <BodyTemplate>
                <div class="dropdown-item">
                    <div class="dropdown-item-progress">
                        <span>Design some buttons</span>
                        <small>20%</small>
                    </div>
                    <Progress IsAnimated="true" IsStriped="true" Value="20" Color="Color.Primary"></Progress>
                </div>
                <div class="dropdown-item">
                    <div class="dropdown-item-progress">
                        <span>Create a nice theme</span>
                        <small>40%</small>
                    </div>
                    <Progress Value="40" Color="Color.Success"></Progress>
                </div>
                <div class="dropdown-item">
                    <div class="dropdown-item-progress">
                        <span>Some task I need to do</span>
                        <small>60%</small>
                    </div>
                    <Progress Value="60" Color="Color.Danger"></Progress>
                </div>
            </BodyTemplate>
            <FooterTemplate>
                <div>@Localizer["BasicUsageViewTasks"]</div>
            </FooterTemplate>
        </DropdownWidgetItem>
    </DropdownWidget>
</div>
